<template>
	<view class="container">
		<text @click="back()" class="iconfont iconzuojiantou-copy backPostion" style="font-size: 45rpx;font-weight:bold;color: #7153FF;"></text>
		<view class="header">
		  <!-- 代码 -->
		  <image class="bg_ware" src="https://moyv.top/wechat/images/bg_wave.gif"></image>
		</view>
		<view class="bottom"></view>
		<view class="content">
			<view class="title">请填写书籍相关信息哦~</view>
			<view class="bookInfo">
				<view class="bookInfo-left">
					<view class="bookInfo-left-top">
						<view class="smallTitle">
							<text class="iconfont iconxing1" style="font-size: 25px;color: #3C2B79;"></text>
							<view class="listTitle">书名：</view>
						</view>
						<span>《{{scanBook.title }}》</span>
					</view>
					<view class="smallTitle">
						<text class="iconfont iconxing" style="font-size: 25px;color: #3C2B79;"></text>
						<view class="listTitle">作者：{{scanBook.author }}</view>
					</view>
				</view>
				<view class="bookInfo-right">
					<image :src="scanBook.img"></image>
				</view>
			</view>
			<view class="bookIntro">
				<view class="smallTitle">
					<text class="iconfont iconxing" style="font-size: 25px;color: #3C2B79;"></text>
					<view class="listTitle">作品简介：</view>
				</view>
				<view :wx:if="scanBook.gist != ''" class="bookIntro-content">
					{{scanBook.gist}}
					<!-- 故事讲述主角纠缠在情绪不稳定且患有精神疾病的直子和开朗活泼的小林绿子之间，展开了自我成长的旅程。自该书在日本问世，截止2012年在日本共销出1500余万册。 -->
				</view>
				<view :wx:if="scanBook.gist == ''" class="bookIntro-content">
					无
					<!-- 故事讲述主角纠缠在情绪不稳定且患有精神疾病的直子和开朗活泼的小林绿子之间，展开了自我成长的旅程。自该书在日本问世，截止2012年在日本共销出1500余万册。 -->
				</view>
			</view>
			<view class="userImg">
				<image src="../../static/头像.jpg"></image>
			</view>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scanBook: {
					
				}
			}
		},
		methods:{
			back () {
				   wx.navigateBack({//返回
				      delta: 1
				    })
			}
		},
		onLoad(options) {
			this.scanBook = JSON.parse(options.scanBook)
			console.log(this.scanBook)
		}
	}
</script>

	
<style>
	.header {
	  width: 100%;
	  position: relative;
	  height:500rpx;
	  background: linear-gradient(to bottom,  #4F38A4, #9B3EEF);
		}
		.bottom{
			position: relative;
		background: linear-gradient(to bottom,  white, #F3F1FE);
	}
	.container{
	
	}
	.bg_ware {
	  position: absolute;
	  left: 0;
	  bottom: -2rpx;
	  width: 100%;
	  mix-blend-mode: screen;
	  height: 120rpx;
	}
	.bottom {
		/* background-color: #F3F1FE; */
		width: 100%;
		height: 703rpx;
	}
	.content{
		position: fixed;
		top: -10px;
		background-color: #FFFFFF;
		width: 75%;
		margin: 25px;
		height: 87%;
		background-image: radial-gradient(circle at 448rpx 860rpx ,transparent 0%, transparent 20px,#FFFFFF20px, #FFFFFF 100%);
		background-position: 192rpx -16rpx;
		border-radius: 14rpx;
		padding: 10px 20px;
	}
	.title {
		font-size: 15px;
		color: #3C2B79;
		font-weight: bold;
		margin-bottom: 10px;
	}
	.bookInfo {
		display: flex;
		justify-content: space-between;
		padding-right: 15px;
	}
	.listTitle  {
		color: #3C2B79;
		font-size: 16px;
		font-weight: bold;
	}
	.bookIntro-content{
		color: #3C2B79;
		font-size: 16px;
		margin-top: 10rpx;
	}
	.smallTitle{
		display: flex;
		align-items: center;
		align-content: center;
		align-items: center;    /**子view垂直居中*/
		vertical-align: center; /**垂直居中*/
		margin-top: 10px;
		width: 400rpx;
	}
	.bookInfo-right image{
		width: 80px;
		height: 100px;
	}
	.userImg {
		position: absolute;
		border: 2px dashed #7153FF;
		padding: 5px;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		bottom: -30px;
		left: 50%;
		transform: translate(-50%, 0%);

	}
	.userImg image{
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}
	.backPostion {
		left: 30rpx;
		top: 50rpx;
		position: absolute;
	}
</style>
